<template>
    <van-search v-model="searchValue" placeholder="搜索你喜欢的商品" @click="onSearch" />

    <div class="content">
        <van-tabs v-model:active="tabActive">
            <van-tab title="分类">
                <van-grid clickable :column-num="2" :gutter="10" direction="horizontal">
                    <van-grid-item icon="bag-o" v-for="item in categorys" :key="item.id" :text="item.name" to="/" />

                    <van-cell center title="全部商品" is-link to="home" @click="toList" />
                </van-grid>
            </van-tab>

            <van-tab title="品牌">
                <van-grid clickable :column-num="2" :gutter="10" direction="horizontal">
                    <van-grid-item icon="star-o" v-for="item in brands" :key="item.id" :text="item.name" to="/" />
                </van-grid>
            </van-tab>
        </van-tabs>
    </div>

</template>

<script setup lang="ts">
import { useCategory } from '@/hooks/category'
// import { ref ,type Ref } from 'vue'
import { useRouter } from 'vue-router'

const { searchValue, tabActive } = useCategory()

// // 获取 VueRouter 路由对象的使用
const router = useRouter()
// const searchValue:Ref<string> = ref('') //搜索框
const onSearch = () => {
    router.push('/search') //跳转到搜索页面
}
const toList = () => {
    router.push('/shoplist')
}

// const tabActive:Ref<number> = ref(0) //tab标签

/* 
商品分类及品牌数据----暂时自己写死的------------
*/
const categorys = [
    { id: 1, name: '超值组合' },
    { id: 2, name: '饼干蛋糕' },
    { id: 3, name: '饮料酒水' },
    { id: 4, name: '进口商品' },
    { id: 5, name: '饼干蛋糕' },
    { id: 6, name: '饮料酒水' },
    { id: 7, name: '新品尝鲜' },
    { id: 8, name: '饼干蛋糕' },
    { id: 9, name: '零食专区' },
    { id: 10, name: '饮料酒水' },

]

const brands = [
    { id: 1, name: '达利园' },
    { id: 2, name: '娃哈哈' },
    { id: 3, name: '爱达乐' },
    { id: 4, name: '康师傅' },
    { id: 5, name: '钱多多' },
    { id: 6, name: '趣多多' },
    { id: 7, name: '好多鱼' },
    { id: 8, name: '轩妈妈' },

]


</script>

<style lang="scss" scoped>
.content {
    height: 100vh;
    width: 100%;
    background: #f2f2f2;
}

.van-grid {
    margin-top: 10px;
}

.van-button--plain.van-button--primary {
    color: black !important;
}

.van-cell {
    margin-top: 10px;
    margin-right: 10px;
}

.van-cell__title {
    text-align: center;
}
</style>